
		var app;

		function load() {
			app = chrome.extension.getBackgroundPage();
			
			loadLanguages("languageList", app.config.getUnselectedLangs());
			loadLanguages("selectedLanguageList", app.config.getSelectedLangs());
			loadLanguages("defaultLang", app.config.getAllLangs(), app.config.getDefaultLang());
			
			var isCtrl = app.config.isCtrlHotkey();
			
			var ctrlRadio = document.getElementById('ctrlkey');
			ctrlRadio.checked = isCtrl;
			
			var ctrlShiftRadio = document.getElementById('ctrlshiftkey');
			ctrlShiftRadio.checked = !isCtrl;
			
			var keyInput = document.getElementById('keycode');
			keyInput.addEventListener('keypress', onKeyPress, false);
			keyInput.addEventListener('keyup', onKeyUp, false);
						
			keyInput.value = app.config.getHotkey();
			keyInput.keyCode = app.config.hotkeyCode();
		}

		function onKeyPress(e) {
			var keyInput = document.getElementById('keycode');
			keyInput.value = '';
		}
		
		function onKeyUp(e) {
			var keyInput = document.getElementById('keycode');
			keyInput.keyCode = e.keyCode;
		}
		
		function save() {
			var unselectedLangList = document.getElementById("languageList");
			var selectedLangList = document.getElementById("selectedLanguageList");
			var defaultLang = document.getElementById("defaultLang");
			var ctrlRadio = document.getElementById('ctrlkey');
			var keyInput = document.getElementById('keycode');
			
			app.saveOptions(
				getItems(unselectedLangList),
				getItems(selectedLangList),
				defaultLang.options[defaultLang.selectedIndex].value,
				ctrlRadio.checked,
				keyInput.keyCode,
				keyInput.value
				);
			
			var div = document.getElementById("massageBlock");
			
			div.style.display = "block";
		}

		function loadLanguages(selectId, langlist, selectedVal) {
			var selectElement = document.getElementById(selectId);
			for (var i = 0; i < langlist.length; i++)
				addOption(selectElement, langlist[i].text, langlist[i].value, selectedVal);
		}

		function addOption(select, text, value, selectedVal) {
			var option = document.createElement("option");
			option.text = text;
			option.value = value;

			if (value == selectedVal)
				option.selected = "selected";

			var index = select.options.length;

			for (var i = 0; i < select.options.length; i++) {
					if (select.options[i].text > text) {
						index = i;
						break;
					}
				}

			select.add(option, select.options[index]);
		}

		function removeOption(select, value) {
			for (var i = 0; i < select.options.length; i++)
				if (select.options[i].value == value) {
					select.remove(i);
					break;
				}
		}

		function selectLanguage() {
			var sourceSelect = document.getElementById("languageList");
			var targetSelect = document.getElementById("selectedLanguageList");

			var list = getSelectedItems(sourceSelect);

			for (var i = 0; i < list.length; i++) {
				addOption(targetSelect, list[i].text, list[i].value);
				removeOption(sourceSelect, list[i].value);
			}
		}

		function removeLanguage() {
			var sourceSelect = document.getElementById("languageList");
			var targetSelect = document.getElementById("selectedLanguageList");

			var list = getSelectedItems(targetSelect);

			for (var i = 0; i < list.length; i++) {
				addOption(sourceSelect, list[i].text, list[i].value);
				removeOption(targetSelect, list[i].value);
			}
		}

		function selectAll() {
			var sourceSelect = document.getElementById("languageList");
			var targetSelect = document.getElementById("selectedLanguageList");

			var list = getItems(sourceSelect);

			for (var i = 0; i < list.length; i++) {
				addOption(targetSelect, list[i].text, list[i].value);
				removeOption(sourceSelect, list[i].value);
			}
		}

		function removeAll() {
			var sourceSelect = document.getElementById("languageList");
			var targetSelect = document.getElementById("selectedLanguageList");

			var list = getItems(targetSelect);

			for (var i = 0; i < list.length; i++) {
				addOption(sourceSelect, list[i].text, list[i].value);
				removeOption(targetSelect, list[i].value);
			}
		}

		function getSelectedItems(select) {
			var list = [];
			for (var i = 0; i < select.options.length; i++)
				if (select.options[i].selected) {
					list[list.length] = {
						text: select.options[i].text,
						value: select.options[i].value
					};
			}

			return list;
		}

		function getItems(select) {
			var list = [];
			for (var i = 0; i < select.options.length; i++) {
					list[list.length] = {
						text: select.options[i].text,
						value: select.options[i].value
					};
			}

			return list;
		}
		
		document.addEventListener('DOMContentLoaded', load);
		document.getElementById('selectButton').addEventListener('click', selectLanguage);
		document.getElementById('selectAllButton').addEventListener('click', selectAll);
		document.getElementById('removeButton').addEventListener('click', removeLanguage);
		document.getElementById('removeAllButton').addEventListener('click', removeAll);
		
		document.getElementById('saveButton').addEventListener('click', save);